<template>
    <div class="sidebar">
        <el-menu class="sidebar-el-menu" v-if="usertype != '1'" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
            text-color="#bfcbd9" active-text-color="#20a0ff"  router>
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :index="item.index" :key="item.index">
                        <template #title>
                            <i :class="item.icon"></i>
                            <span>{{ item.title }}</span>
                        </template>
                        <template v-for="subItem in item.subs">
                            <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                                <template #title>{{ subItem.title }}</template>
                                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
                                    {{ threeItem.title }}</el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index" :key="item.index">
                        <i :class="item.icon"></i>
                        <template #title>{{ item.title }}</template>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
      <el-menu class="sidebar-el-menu" v-if="usertype === '1'" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
               text-color="#bfcbd9" active-text-color="#20a0ff"  router>
        <template v-for="item in sitems">
          <template v-if="item.subs">
            <el-submenu :index="item.index" :key="item.index">
              <template #title>
                <i :class="item.icon"></i>
                <span>{{ item.title }}</span>
              </template>
              <template v-for="subItem in item.subs">
                <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                  <template #title>{{ subItem.title }}</template>
                  <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
                    {{ threeItem.title }}</el-menu-item>
                </el-submenu>
                <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}
                </el-menu-item>
              </template>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="item.index" :key="item.index">
              <i :class="item.icon"></i>
              <template #title>{{ item.title }}</template>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>
</template>
///
<script>
    import { computed, watch } from "vue";
    import { useStore } from "vuex";
    import { useRoute } from "vue-router";
    export default {
        setup() {
          const sitems = [
            {
              icon: "el-icon-lx-home",
              index: "/dashboard",
              title: "系统首页",
            },
            {
              icon: "el-icon-lx-home",
              index: "/firstorder",
              title: "初访预约",
            }
          ];
            const items = [
                {
                    icon: "el-icon-lx-home",
                    index: "/dashboard",
                    title: "系统首页",
                },
                {
                    icon: "el-icon-lx-home",
                    index: "/firstorder",
                    title: "初访预约",
                },
                {
                    icon: "el-icon-lx-home",
                    index: "/result",
                    title: "问卷结果",
                },
                {
                    icon: "el-icon-lx-home",
                    index: "/application",
                    title: "咨询申请",
                },
                {
                    icon: "el-icon-lx-home",
                    index: "/rota",
                    title: "值班信息",
                },
                {
                    icon: "el-icon-lx-calendar",
                    index: "1",
                    title: "初访",
                    subs: [
                        {
                            icon: "el-icon-lx-home",
                            index: "/firstlog",
                            title: "初访登记"
                        },
                        {
                            icon: "el-icon-lx-home",
                            index: "/firstresult",
                            title: "初访结果"
                        },
                    ],
                },
                {
                    icon: "el-icon-lx-calendar",
                    index: "4",
                    title: "咨询",
                    subs: [
                        {
                            icon: "el-icon-lx-home",
                            index: "/consultPage",
                            title: "咨询列表",
                        },
                        {
                            icon: "el-icon-lx-home",
                            index: "/recordlog",
                            title: "咨询记录表",
                        },
                    ],
                },
                {
                    icon: "el-icon-lx-calendar",
                    index: "2",
                    title: "管理",
                    subs: [
                        {
                            icon: "el-icon-lx-home",
                            index: "/timeManagement",
                            title: "时间段管理"
                        },
                        {
                            icon: "el-icon-lx-home",
                            index: "/consultManagement",
                            title: "咨询管理"
                        },
                        {
                            icon: "el-icon-lx-cascades",
                            index: "/rotaManagement",
                            title: "值班管理",
                        },
                    ],
                },
                {
                    icon: "el-icon-lx-calendar",
                    index: "3",
                    title: "最终报告",
                    subs: [
                        {
                            index: "/closedReport",
                            title: "结案报告",
                        },
                        // {
                        //     index: "/upload",
                        //     title: "咨询结案报告",
                        // },
                    ],
                },
                // {
                //     icon: "el-icon-lx-copy",
                //     index: "/tabs",
                //     title: "tab选项卡",
                // },
                // {
                //     icon: "el-icon-lx-emoji",
                //     index: "/icon",
                //     title: "自定义图标",
                // },
                // {
                //     icon: "el-icon-pie-chart",
                //     index: "/charts",
                //     title: "schart图表",
                // },
                // {
                //     icon: "el-icon-lx-global",
                //     index: "/i18n",
                //     title: "国际化功能",
                // },
                // {
                //     icon: "el-icon-lx-redpacket_fill",
                //     index: "/donate",
                //     title: "支持作者",
                // },
                //
            ];

            const route = useRoute();

            const onRoutes = computed(() => {
                return route.path;
            });

            const usertype = localStorage.getItem("usertype")

            const store = useStore();
            const collapse = computed(() => store.state.collapse);

            return {
              usertype,
              sitems,
                items,
                onRoutes,
                collapse,
            };
        },
    };
</script>

<style scoped>
    .sidebar {
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom: 0;
        overflow-y: scroll;
    }
    .sidebar::-webkit-scrollbar {
        width: 0;
    }
    .sidebar-el-menu:not(.el-menu--collapse) {
        width: 250px;
    }
    .sidebar > ul {
        height: 100%;
    }
</style>
